<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!--      门店原料申请审批-->
      <el-card class="box-card">
        <el-divider content-position="left"><i class="el-icon-s-order"></i>{{$t('门店申请原料表单审核列表')}}</el-divider>
        <el-form :inline="true" v-model="hqReviewListQuery" class="demo-form-inline">
          <el-form-item>
            <el-input
                clearable
                size="small"
                style="width: 180px"
                :placeholder="$t('请输入原料编号')"
                v-model="hqReviewListQuery.serialNumber"
            ></el-input>
            <el-select @change="getHqReviewList" size="small" v-model="hqReviewListQuery.shopId" clearable :placeholder="$t('请选择门店')" >
              <el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>

            <el-select @change="getHqReviewList" size="small" v-model="hqReviewListQuery.review" clearable :placeholder="$t('请选择状态')" >
              <el-option v-for="item in reviewStatus" :key="item.review" :label="item.label" :value="item.review">
                <el-link :underline="false" :type="getStatusInfo(item.review).status">
                  <i :class="getStatusInfo(item.review).icon" :style="{ color: getStatusInfo(item.review).color }"></i>
                  {{ getStatusInfo(item.review).text }}
                </el-link>
              </el-option>
            </el-select>

            <el-button
                type="info"
                size="small"
                @click="getHqReviewList"
                plain1
                icon="el-icon-search"
            ></el-button>
            <el-button
                size="small"
                @click="getHqReviewList"
                plain1
                icon="el-icon-refresh"
            >{{ $t("刷新列表") }}</el-button>
          </el-form-item>
        </el-form>

        <el-table
            v-loading="hqReviewListLoading"
            :element-loading-text="$t('拼命加载中')"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)"
            ref="handSelectTest_multipleTable"
            :data="hqReviewList"
            stripe
            border
            height="650"
            :header-cell-style="{background:'#004d8c',color:'#FFFFFF'}"
        >
          <template slot="empty">
            <el-empty description="没有数据"></el-empty>
          </template>
          <el-table-column
              type="index"
              :label="$t('序号')"
              :index="(index) => getIndex(index, hqReviewListQuery.page, hqReviewListQuery.limit)"
              width="50">
          </el-table-column>
          <el-table-column
              min-width="150"
              align="center"
              prop="serialNumber"
              :label="$t('原料申请编号')"
          ></el-table-column>

          <el-table-column
              align="center"
              min-width="150"
              :label="$t('申请门店')"
              prop="materialType"
          >
            <template slot-scope="scope">
              <span :style="{fontWeight:'bold',color:'#004d8c'}">{{ scope.row.shopName }}</span>
            </template></el-table-column
          >

          <el-table-column
              align="center"
              min-width="100"
              :label="$t('状态')"
              prop="materialType"
          >
            <template slot-scope="scope">
              <el-link @click="handleHqReviewDetailList(scope.row)" :underline="false" :type="getStatusInfo(scope.row.review).status">
                <i :class="getStatusInfo(scope.row.review).icon" :style="{ color: getStatusInfo(scope.row.review).color }"></i>
                {{ getStatusInfo(scope.row.review).text }}
              </el-link>
            </template></el-table-column
          >

          <el-table-column
              align="center"
              min-width="150"
              :label="$t('申请时间')"
              prop="materialType"
          >
            <template slot-scope="scope">
              <span>{{ formattedDateTime(scope.row.addTime) }}</span>
            </template></el-table-column
          >

          <el-table-column
              align="center"
              prop="remark"
              :label="$t('备注信息')"
          ></el-table-column>

          <el-table-column
              align="center"
              :label="$t('Operate')"
              width="150"
              class-name="small-padding fixed-width"
          >
            <template slot="header" slot-scope="{ row }">
              {{ $t("Operate") }}
              <i class="el-icon-setting"></i>
            </template>

            <template slot-scope="scope">
              <el-row>
                <el-col :span="8">
                  <el-button
                      type="text"
                      icon="el-icon-view"
                      size="small"
                      @click="handleHqReviewDetailList(scope.row)"
                  >{{ $t("查看") }}
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <el-button
                      v-shop="false"
                      v-if="scope.row.review == 1"
                      type="text"
                      icon="el-icon-s-check"
                      size="small"
                      @click="handleHQMaterialReview(scope.row)"
                  >{{ $t("审批") }}
                  </el-button>
                </el-col>
                <el-col :span="8">
                  <el-popconfirm
                      title="确定删除吗？"
                      @confirm="handleDeleteHqReview(scope.row)"
                  >
                    <el-button
                        slot="reference"
                        type="text"
                        icon="el-icon-delete"
                        size="small"
                    >{{ $t("删除") }}
                    </el-button>
                  </el-popconfirm>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            :autoScroll="false"
            v-show="hqReviewListQuery.total > 0"
            :total="hqReviewListQuery.total"
            :page.sync="hqReviewListQuery.page"
            :limit.sync="hqReviewListQuery.limit"
            @pagination="getHqReviewList"
        />
      </el-card>
      <el-dialog
          title="申请单"
          :visible.sync="reviewMaterialSwitchDialogVisible"
          width="90%">
        <el-card shadow="never">
          <div>
            <el-form :model="reviewMaterialForm" size="mini"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="申请编号:" prop="name">
                    <span slot="label">
                      <el-tooltip class="item" effect="light" placement="right-start">
                        <span slot="content">唯一编号</span>
                        <i class="el-icon-question"/><!--小问号提示-->
                      </el-tooltip>
                      申请编号:
                    </span>
                    {{ reviewMaterialForm.serialNumber }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请时间:" prop="name">
                    {{ formattedDateTime(new Date())}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="备注信息:" prop="region">
                    <el-input disabled type="textarea" :rows="4" placeholder="没有备注内容～"
                              v-model="reviewMaterialForm.remark">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态信息:" prop="region">
                    <el-link :underline="false" :type="getStatusInfo(reviewMaterialForm.review).status">
                      <i :class="getStatusInfo(reviewMaterialForm.review).icon" :style="{fontSize:'30px', color: getStatusInfo(reviewMaterialForm.review).color }">{{ getStatusInfo(reviewMaterialForm.review).text }}</i>
                    </el-link>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="first">
              <el-table  :header-cell-style="{background:'#1988e7',color:'#FFFFFF'}" :data="hqReviewDetailList" style="width: 100%"  height="250">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="name" label="原料名称" width="180">
                </el-table-column>

                <el-table-column
                    align="center"
                    min-width="150"
                    :label="$t('申请量')"
                    prop="hqNumber"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.applyNumber }}</span>
                  </template></el-table-column
                >

                <el-table-column
                    align="center"
                    prop="property"
                    :label="$t('属性')"
                    width="180"
                ></el-table-column>

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('库存量')"
                    prop="hqNumber"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.hqNumber }}</span>
                  </template></el-table-column
                >

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('规格')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.standard }}</span>
                  </template></el-table-column
                >

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('原料分类')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.classification }}</span>
                  </template></el-table-column
                >


                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('基本单位')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.basicUnit }}</span>
                  </template></el-table-column
                >

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('标签')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.label }}</span>
                  </template></el-table-column
                >


                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('品牌')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.brand }}</span>
                  </template></el-table-column
                >

                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('原料单位')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.unit }}</span>
                  </template></el-table-column
                >
                <el-table-column
                    align="center"
                    min-width="100"
                    :label="$t('盘点单位')"
                    prop="materialType"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.checkUnit }}</span>
                  </template></el-table-column
                >

              </el-table>
              <pagination
                  :autoScroll="false"
                  v-show="hqReviewDetailListQuery.total > 0"
                  :total="hqReviewDetailListQuery.total"
                  :page.sync="hqReviewDetailListQuery.page"
                  :limit.sync="hqReviewDetailListQuery.limit"
                  @pagination="getHqReviewDetailList"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <span slot="footer" class="dialog-footer">
            <el-button icon="el-icon-success" v-show="hasReviewPressed" type="success"  @click="handelHqMaterialReviewExecutor(2)">审核通过</el-button>
            <el-button icon="el-icon-error" v-show="hasReviewPressed" type="danger"  @click="handelHqMaterialReviewExecutor(3)">审核驳回</el-button>

            <el-button @click="reviewMaterialSwitchDialogVisible = false">取 消</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { hqMaterialApplicationReviewList,hqMaterialApplicationReviewDetailList,hqReviewDelete ,hqMaterialReviewExecutor} from "@/api/masterInventory";
import {formatDate, formattedDateTime} from "../../utils/date";
import { getShopAll } from '@/api/shop'
export default {
  name: "masterInventory",
  components: { Pagination },
  data() {
    return {
      activeName:'first',
      //门店原料申请审批列表加载
      hqReviewListLoading:false,
      //门店原料申请审批列表
      hqReviewList:[],
      //门店列表
      shops: [],
      //审核状态
      reviewStatus:[{review:1,label:'待审批'},{review:2,label:'审批通过'},{review:3,label:'审批驳回'}],
      //查询条件
      hqReviewListQuery: {
        review:undefined,
        shopId:undefined,
        name: undefined,
        page: 1,
        limit: 10,
        total: 1,
      },

      //申请详情开关
      reviewMaterialSwitchDialogVisible:false,
      //申请详情
      reviewMaterialForm:{review:0},
      //门店原料申请审批列表加载
      hqReviewDetailListLoading:false,
      //申请详情原料列表
      hqReviewDetailList:[],
      hqReviewDetailListQuery: {
        reviewId: undefined,
        name: undefined,
        page: 1,
        limit: 10,
        total: 1,
      },
      //点击审核按钮开关
      hasReviewPressed:false,


    };
  },
  created() {
    //获取所有审批列表
    this.getHqReviewList();
    //加载所有门店
    this.getShop();
  },
  methods: {
    formattedDateTime,formatDate,
    //所有门店
    getShop(){
      getShopAll().then(res => {
        const response = res.data.data;
        this.shops = response;
      })
    },
    //审批状态
    getStatusInfo(review) {
      switch (review) {
        case 1:
          return { status: 'warning', text: '待审批' ,color: 'orange',icon:'el-icon-warning'};
        case 2:
          return { status: 'success', text: '审批通过' ,color: 'green',icon:'el-icon-success'};
        case 3:
          return { status: 'danger', text: '审批驳回' ,color: 'red',icon:'el-icon-error'};
        default:
          return { status: 'info', text: '未知状态' ,color: 'black',icon:'el-icon-question'};
      }
    },
    //序号叠加
    getIndex(index, page, limit) {
      return (index + 1) + (page - 1) * limit;
    },
    //获取所有审批列表
    getHqReviewList(){
      hqMaterialApplicationReviewList(this.hqReviewListQuery).then((response) => {
        this.hqReviewList = response.data.data.list;
        this.hqReviewListQuery.total = response.data.data.total;
        this.hqReviewListLoading = false;
      })
          .catch(() => {
            this.hqReviewList = [];
            this.hqReviewListQuery.total = 0;
            this.hqReviewListLoading = false;
          });
    },
    //打开获取申请单详情
    handleHqReviewDetailList(row){
      this.hasReviewPressed = false
      this.reviewMaterialSwitchDialogVisible = true
      this.reviewMaterialForm = row
      this.hqReviewDetailListQuery.reviewId = row.id
      this.getHqReviewDetailList()
    },

    //打开获取申请单审核详情
    handleHQMaterialReview(row){
      this.hasReviewPressed = row.review==1
      this.reviewMaterialSwitchDialogVisible = true
      this.reviewMaterialForm = row
      this.hqReviewDetailListQuery.reviewId = row.id
      this.getHqReviewDetailList()
    },

    //删除申请记录
    handleDeleteHqReview(row){
      hqReviewDelete({id:row.id}).then((response) => {
        this.$notify.success({
          title: this.$t('Success!'),
          message: '删除成功！'
        });
          this.getHqReviewList()
      })
      .catch(() => {
        this.$notify.error({
          title: this.$t('Error!'),
          message: '删除失败！'
        });
      });
    },

    //获取申请单详情列表
    getHqReviewDetailList(){
      this.reviewMaterialSwitchDialogVisible = true
      hqMaterialApplicationReviewDetailList(this.hqReviewDetailListQuery).then((response) => {
        this.hqReviewDetailList = response.data.data.list;
        this.hqReviewDetailListQuery.total = response.data.data.total;
        this.hqReviewDetailListLoading = false;
      })
          .catch(() => {
            this.hqReviewDetailList = [];
            this.hqReviewDetailListQuery.total = 0;
            this.hqReviewDetailListLoading = false;
          });
    },
    //执行审批
    handelHqMaterialReviewExecutor(status){
      hqMaterialReviewExecutor({id:this.reviewMaterialForm.id,status:status}).then((response) => {
        this.$notify.success({
          title: this.$t('Success!'),
          message: '审核成功！'
        });
        this.reviewMaterialSwitchDialogVisible = false
        this.getHqReviewList()
      })
      .catch(() => {
        this.$notify.error({
          title: this.$t('Error!'),
          message: '审核失败！'
        });
      });
    }
  }
};
</script>
<style scoped>
</style>
